<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
  </head>

  <body>
    <div id="app"></div>

    <script>
      const app = Vue.createApp({
          template:`
          <parent v-if="showParent"></parent>
          <hr>
          <button @click="showParent=!showParent">显示/隐藏</button>
          `,
          data(){
              return {
                  showParent:true
              }
          }
      });

      app.component("parent", {
        data() {
          return {
            count: 0,
          };
        },
        template: `
            <son v-if="count < 5" :count="count"></son>
            {{count}}
            <button @click="count++">add</button>
            `,
        /* 组件实例被创建之前 */
        beforeCreate() {
          console.log("dad beforeCreate");
        },

        // 组件被创建
        created() {
          console.log("dad created");
        },

        /* 组件实例被挂载之前 */
        beforeMount() {
          console.log("dad beforeMount");
        },

        // 组件挂载完毕【高频】所有的视图已就绪，发起AJAX请求，渲染数据
        mounted() {
          console.log("dad mounted");
        },

        /* 更新之前 */
        beforeUpdate() {
          console.log("dad beforeUpdate");
        },

        // 更新完毕
        updated() {
          console.log("dad updated");
        },

        /* 卸载之前【高频】是否保存数据 */
        beforeUnmount() {
          console.log("dad beforeUnmount");
        },

        // 卸载完毕
        unmounted() {
          console.log("dad unmounted");
        },
        
      });

      app.component("son", {
        props: ["count"],
        template: `<div>son:{{count}}</div>`,
        /* 组件实例被创建之前 */
        beforeCreate() {
          console.log("son beforeCreate");
        },

        // 组件被创建
        created() {
          console.log("son created");
        },

        /* 组件实例被挂载之前 */
        beforeMount() {
          console.log("son beforeMount");
        },

        // 组件挂载完毕【高频】所有的视图已就绪，发起AJAX请求，渲染数据
        mounted() {
          console.log("son mounted");
        },

        /* 更新之前 */
        beforeUpdate() {
          console.log("son beforeUpdate");
        },

        // 更新完毕
        updated() {
          console.log("son updated");
        },

        /* 卸载之前【高频】是否保存数据 */
        beforeUnmount() {
          console.log("son beforeUnmount");
        },

        // 卸载完毕
        unmounted() {
          console.log("son unmounted");
        },
      });

      const vm = app.mount("#app");
    </script>
  </body>
</html>
